<template>
	<!-- 积分商品详情 -->
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="topbacks" :style="'margin-top:-'+navH+'px'">
			<u-swiper :list="info.images" mode="number" height="785" indicator-pos="bottomRight" border-radius="0">
			</u-swiper>
		</view>
		<view class="shopsinfo">
			<view class="shopsmain">
				<view class="infos">
					<text class="infosname clamp2">{{info.title}}</text>
					<view class="infos_price">{{info.integral}}积分</view>
				</view>
				<button open-type="share" class="sharebox">
					<u-icon name="zhuanfa" color="#333333" size="44"></u-icon>
					<text class="share">分享</text>
				</button>
			</view>
			<view class="shopsadd">
				<text>已有{{info.exchange_num}}人兑换</text>
				<text class="distance">限量{{info.limit}}份</text>
			</view>
		</view>

		<view class="info_content">
			<text>详情</text>
			<view class="richbox" style="width:750rpx;">
				<!-- <rich-text :nodes="info.content"></rich-text> -->
				<u-parse :html="info.content" :tag-style="style"></u-parse>
			</view>
		</view>
		<view class="foot">
			<view class="btn" @click="show=true">立即兑换</view>
		</view>
		<popup v-model="show" mode="bottom" border-radius="16">
			<view class="popup">
				<view class="goods" v-if="info.spec.length>0">
					<view class="img">
						<image class="image" :src="info.spec[curSku].image" mode="aspectFill"></image>
					</view>
					<view style="flex:1;">
						<view class="price">{{info.spec[curSku].integral}}积分</view>
						<view class="stock">库存{{info.spec[curSku].stock}}</view>
						<view class="sku">{{info.spec[curSku].spec_name}}</view>
					</view>
					<view class="iconfont icon-quxiao" @click="show = false"></view>
				</view>
				<view class="goods" v-else>
					<view class="img">
						<image class="image" :src="info.images[0]" mode="aspectFill"></image>
					</view>
					<view style="flex:1;">
						<view class="price">{{info.integral}}积分</view>
						<view class="stock">库存{{info.limit}}</view>
					</view>
					<view class="iconfont icon-quxiao" @click="show = false"></view>
				</view>
				<view class="title" v-if="info.spec.length>0">规格</view>
				<view class="tags flex_align">
					<view :class="index==curSku?'curtag':'tag'" v-for="(item,index) in info.spec" :key="index"
						@click="chooseSku(index)">{{item.spec_name}}</view>
				</view>
				<view class="flex_bet_align">
					<view class="title">购买数量</view>
					<numberBox v-model="number" :min="1" v-if="info.spec.length>0" :max="info.spec[curSku].stock">
					</numberBox>
					<numberBox v-model="number" :min="1" v-else :max="info.limit"></numberBox>
				</view>
				<view class="buy" @click="buy">确定</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import App from '@/App.vue';
	import popup from '@/uview-ui/components/u-popup/u-popup.vue';
	import numberBox from '@/uview-ui/components/u-number-box/u-number-box.vue';
	var _this;
	export default {
		components: {
			popup,
			numberBox
		},
		data() {
			return {
				settingdata: {
					name: '详情',
					bgColor: 'transparent',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "supplydetail"
				},
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'
					}
				],
				show: true,
				navH: 0,
				stars: 5,
				info: [],
				curSku: 0,
				number: 1,
				style: {
					p: 'width:750rpx',
					span: 'width:750rpx',
					div: 'width:750rpx',
					img: 'width:750rpx',
					table: 'width:750rpx'
				}
			}
		},
		onLoad(options) {
			_this = this
			_this.id = options.id
			_this.navH = App.globalData.navHeight
			_this.getInfo(options.id)
		},
		onShow() {
			_this.show = false
			console.log(wx.getStorageSync("refresh"))
			if (wx.getStorageSync("refresh") == 1 || !wx.getStorageSync("refresh")) {
				_this.getInfo(_this.id)
			}
		},
		onShareAppMessage: function() {},
		onPageScroll(res) {
			if (res.scrollTop >= _this.navH) {
				_this.settingdata.bgColor = "#ffffff"
			} else {
				_this.settingdata.bgColor = "transparent"
			}
		},
		methods: {
			getInfo(id) {
				_this.$api.get("goodsdetail", {
					id: id
				}).then(data => {
					_this.info = data;
				});
			},
			chooseSku(e) {
				this.curSku = e
			},
			buy() {
				_this.$api.get("getorderinfo", {
					integral_goods_id: _this.info.id,
					sku_id: _this.info.spec.length > 0 ? _this.info.spec[_this.curSku].id : "",
					number: _this.number
				}).then(data => {
					uni.navigateTo({
						url: './confirm_exchange?json=' + encodeURIComponent(JSON.stringify(data))
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topbacks {
		height: 785rpx;
		width: 100%;
	}

	.shopsinfo {
		margin: 0 25rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 26rpx;
		border-bottom: 2rpx solid #e6e6e6;

		.shopsmain {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			align-items: center;

			.infos {
				display: flex;
				flex-direction: column;
				width: 520rpx;

				.infos_price {
					font-size: 37rpx;
					font-weight: bold;
					color: #F73F3F;
					display: flex;
					flex-direction: row;
					align-items: flex-end;

					._1 {
						font-size: 30rpx;
					}

					._2 {
						font-size: 27rpx;
					}
				}

				.infosname {
					margin-top: 22rpx;
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
				}
			}


			.sharebox {
				margin-left: 63rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #FFFFFF;

				&::after {
					border: 0;
				}

				.iconfont {
					font-size: 40rpx;
					color: #333333;
				}

				.share {
					color: #999999;
					font-size: 24rpx;
				}
			}
		}

		.shopsadd {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 56rpx;

			text {
				color: #999999;
				font-size: 24rpx;
			}

			.distance {
				margin-left: 55rpx;
			}
		}
	}

	.info_content {
		padding: 60rpx 0 98rpx 0;
		padding: 60rpx 0 calc(env(safe-area-inset-bottom) + 98rpx) 0;
		display: flex;
		flex-direction: column;

		text {
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 25rpx;
		}

		.richbox {
			margin-top: 50rpx;

			rich-text {
				width: 750rpx;
			}
		}
	}

	.foot {
		position: sticky;
		bottom: 0rpx;
		width: 750rpx;
		height: 130rpx;
		background-color: #FFFFFF;

		.btn {
			text-align: center;
			width: 690rpx;
			height: 90rpx;
			margin: 0 auto 30rpx;
			line-height: 90rpx;
			background: linear-gradient(86deg, #38be8c 0%, #05adbb 100%);
			border-radius: 45rpx;
			font-size: 30rpx;
			color: #ffffff;
		}
	}

	.popup {
		padding: 30rpx;

		.goods {
			display: flex;
			justify-content: space-between;

			.img {
				width: 170rpx;
				height: 170rpx;
				background-color: #EEEEEE;
				margin-right: 20rpx;

				.image {
					width: 170rpx;
					height: 170rpx;
				}
			}

			.price {
				font-size: 28rpx;
				color: #F74343;
				margin: 18rpx 0;
			}

			.stock {
				font-size: 24rpx;
				color: #999999;
				margin-bottom: 30rpx;
			}

			.sku {
				font-size: 24rpx;
			}

			.iconfont {
				font-size: 40rpx;
				color: #999999;
			}
		}

		.title {
			font-size: 28rpx;
			margin: 35rpx 0 20rpx;
		}

		.tags {
			padding: 10rpx 0;
			flex-wrap: wrap;

			.curtag {
				padding: 0 15rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 20rpx;
				border-radius: 25rpx;
				background-color: #FFD9D6;
				margin-right: 20rpx;
			}

			.tag {
				height: 50rpx;
				padding: 0 15rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 20rpx;
				border-radius: 25rpx;
				background-color: rgba(184, 184, 184, 0.38);
				margin-right: 20rpx;
			}
		}

		.buy {
			text-align: center;
			width: 690rpx;
			height: 90rpx;
			margin: 30rpx auto 30rpx;
			line-height: 90rpx;
			background: linear-gradient(86deg, #38be8c 0%, #05adbb 100%);
			border-radius: 45rpx;
			font-size: 30rpx;
			color: #ffffff;
		}
	}
</style>
